<template>
    <div class="">
        <img :src="product.image"
             @click="selectProductItem(product)"
             :class="['product',isSelect?'select':'']"
             alt=""/>
    </div>
</template>
<script>

    import {createProp} from "../util/util";

    export default {
        props: {
            products: createProp([Array]),
            product: createProp([Object])
        },
        computed: {
            isSelect() {
                if (!this.products) return false
                return this.products.findIndex(_product => _product.id === this.product.id) >= 0
            },
        },
        data() {
            return {
                form: {
                    table: [],
                    from: 0,
                    tableLoading: false,
                    total: 0,
                },

            }
        },
        methods: {
            selectProductItem(product) {
                this.$emit('selectProductItem', product)
            }
        }
    }
</script>
<style lang="scss" scoped>
    .select {
        box-sizing: border-box;
        border: 1px dashed black;
    }

    img {
        width: 100px;
        height: 100px;
        margin-right: 10px;
        margin-bottom: 10px;
    }
</style>
